<template>
  <div>
    <label v-if="label">
      {{label}}
    </label>
    <slot></slot>
    <!-- 校验信息 -->
    <p v-if="errorMessage">{{errorMessage}}</p>
  </div>
</template>

<script>
import Schema from 'async-validator'
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    prop: String
  },
  inject: ['form'],
  data(){
    return {
      errorMessage: ''
    }
  },
  mounted(){
    // 监听校验事件，并执行监听
    this.$on('validate', () => {
      this.validate()
    })
  },
  methods: {
    validate() {
      // 执行组件校验
      // 获取校验规则
      const rules = this.form.rules[this.prop]
      // 获取数据
      const value = this.form.model[this.prop]
      // 执行校验
      const desc = {
        [this.prop]: rules
      }
      const schema = new Schema(desc)
      // 参数1是值， 参数2是校验错误对象数据
      // 返回promise
      return schema.validate({[this.prop]: value}, errors => {
        if(errors){
          // 校验不通过
          this.errorMessage = errors[0].message
        } else {
          // 校验通过清除错误信息
          this.errorMessage = ''
        }
      })
    }
  }
}
</script>